<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    
    function App(){
        let list=[
            {
                name:"张三",
                age:18,
                sex:true
            },
            {
                name:"李四",
                age:8,
                sex:false
            },{
                name:"王红",
                age:15,
                sex:false
            },{
                name:"张良",
                age:19,
                sex:true
            }
        ]
        function showMsg(name,age,sex){
            alert(name+age+sex)
        }
        return (
            <div>
            <table>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>   
                {
                    list.map((item,index)=>{
                        return (
                            <tr key={index} style={{color:index%2===0?'red':'blue'}}>
                                <td>{item.name}</td>
                                <td>
                                    {item.age<=10 && '少年'} 
                                    {(item.age>10&&item.age<18) && "青年"}
                                    {item.age>=18 && "成年"}   
                                </td>
                                <td>
                                    {item.sex?'男':'女'}
                                </td>
                                <td>
                                  <button onClick={()=>showMsg(item.name,item.age,item.sex)}>点我</button>    
                                </td>    
                            </tr>
                        )
                    })
                } 
            </table>    
            </div>
        )
    }
    ReactDOM.render(<App/>,document.getElementById("root"));
</script>
</html>